import React from 'react';
import './userlist.css'
// import './reset.css'
import { useState, useEffect } from "react";
import axios from 'axios'
import { Pagination, Table } from 'antd';
const columns = [
    {
        title: '注册日期',
        dataIndex: 'registe_time',
        render: (text) => <a>{text}</a>,
    },
    {
        title: '用户姓名',
        dataIndex: 'username',
    },
    {
        title: '注册地址',
        dataIndex: 'city',
    },
];
export default function App() {
    let [users, setusers] = useState()
    let [user, setuser] = useState([])
    let [limit, setlimit] = useState(20)
    let pages = 1
    useEffect(() => {
        axios.get('https://elm.cangdu.org/v1/users/count').then(res => {
            if (res.data.status == 1) {
                setusers(res.data.count)
            }
        })
        clk()
    }, []);
    function change(page) {
        if (page == 0) {
            return
        }
        // page == 0 && (page = 1)
        pages = page
        clk()
    }
    function changehandle(current, size) {
        limit = size
        setlimit(limit)
        clk()
    }
    function clk() {
        axios.get(`https://elm.cangdu.org/v1/users/list?offset=${(pages - 1) * limit}&limit=${limit}`).then(res => {
            if (Array.isArray(res.data)) {
                user = res.data
                setuser([...user])
            } else {
                setuser([])
            }

        })
    }
    return <div className='main'>
        <Table columns={columns} dataSource={user} pagination={false} rowKey={'username'} />
        <Pagination total={users} showTotal={(users) => `共${users}条`}
            showQuickJumper showSizeChange onChange={change} onShowSizeChange={changehandle} pageSize={user.length} />
    </div>
}